<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GET VIDEO</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <input id="address" type="text" disabled />
    <input
      type="button"
      title="开启摄像头"
      value="开启摄像头"
      onclick="getMedia()"
    />
    <input
      type="button"
      title="开启定位"
      value="开启定位"
      onclick="getLocation()"
    />
    <video id="video" width="300px" height="300px" autoplay="autoplay"></video>
    <canvas id="canvas" width="300px" height="300px"></canvas>
    <button id="snap" onclick="takePhoto()">拍照</button>
    <button id="snap" onclick="changePhoto()">切换</button>
    <div id="text"></div>
    <div id="getMedia"></div>
    <p id="demo">位置信息</p>
    <script>
      let front = false;
      let num = 1;
      let position = document.getElementById("demo");
      let lat = 0;
      let lag = 0;
      function getMedia() {
        document.getElementById("getMedia").innerHTML = num++;
        let constraints = {
          video: {
            width: 500,
            height: 500,
            facingMode: front ? "user" : "environment",
          },
          audio: true,
        };
        //获得video摄像头区域
        let video = document.getElementById("video");
        //这里介绍新的方法，返回一个 Promise对象
        // 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
        // then()是Promise对象里的方法
        // then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
        // 避免数据没有获取到
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
          video.srcObject = MediaStream;
          video.play();
        });
      }

      function takePhoto() {
        //获得Canvas对象
        let video = document.getElementById("video");
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, 500, 500);
      }
      function changePhoto() {
        front = !front;
        document.getElementById("text").innerHTML = front;
        getMedia();
      }

      function showError(error) {
        switch (error.code) {
          case error.PERMISSION_DENIED:
            alert("定位失败,用户拒绝请求地理定位");
            break;
          case error.POSITION_UNAVAILABLE:
            alert("定位失败,位置信息是不可用");
            break;
          case error.TIMEOUT:
            alert("定位失败,请求获取用户位置超时");
            break;
          case error.UNKNOWN_ERROR:
            alert("定位失败,定位系统失效");
            break;
        }
      }
      function showPosition(position) {
        console.log("showPosition");
        lat = position.coords.latitude; //纬度
        lag = position.coords.longitude; //经度
        console.log("纬度:" + lat + ",经度:" + lag);
        getAddress();
      }

      function getLocation() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition, showError);
        } else {
          alert("浏览器不支持地理定位。");
        }
      }
      function getAddress() {
        var geocoder = new AMap.Geocoder({
          city: "010", //城市设为北京，默认：“全国”
          radius: 1000, //范围，默认：500
        });
        const params = [lag, lat];
        geocoder.getAddress(params, function (status, result) {
          if (status === "complete" && result.regeocode) {
            var address = result.regeocode.formattedAddress;
            console.log(address);
            document.getElementById("address").value = address;
          } else {
            console.error("根据经纬度查询地址失败");
          }
        });
      }
    </script>
    <script
      type="text/javascript"
      src="https://webapi.amap.com/maps?v=1.4.15&key=a0f264f36b089e8815d65f3c3602de72&plugin=AMap.Geocoder"
    ></script>
  </body>
</html>
